<template>
	<!-- 支付页面 -->
	<view class="content">
		<view class="top" style="padding:10rpx 0;"></view>
		<view class="label label2">
			<view class="label_left">
				订单编号
			</view>
			<view class="label_right">
				ME18832689312873
			</view>
		</view>
		<view class="label label2" style="border-top: 2rpx solid #ebebeb;">
			<view class="label_left">
				订单金额
			</view>
			<view class="label_right">
				<view style="color: #ff80c0;font-size:30rpx;font-weight: 500;">¥3.40</view>
			</view>
		</view>
		
		<view class="play_ul">
			<view class="play_li">
				<view class="play_li_left">
					<image src='http://wx.crh2009.com/addons/ewei_shopv2/static/images/wxcz.png' mode="widthFix"></image>
				</view>
				<view class="play_li_right">
					<view class="play_li_right_top">易宝支付</view>
					<view class="play_li_right_bt">微信安全支付</view>
				</view>
					<radio value="wxplay" class="play_li_right_radio" color="#ff80c0" @tap="wxplay()"/>
			</view>
		</view>
<view class="bao_btn" @tap="play">确认支付</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				
			}
		},
		methods:{
			wxplay (){
				console.log('微信支付');
			},
			play (){  //支付
				uni.navigateTo({
					url:'../order/successplay'
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.label{
		width:94%;
		padding:20rpx 3%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.label_left{
		display: flex;
		justify-content:flex-start;
		align-items: center;
		color:#666;
		font-size:28rpx;
	}
	.label_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.tou_img{
		border-radius: 100rpx;
		width:100rpx;	
	}
	.btimg{
		width:30rpx;
		margin-left:5rpx;
	}
	.label2 .label_left{
		width:25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.smstart{
		color:red;
		font-size:30rpx;
	}
	.label2 .label_right{
		width:80%;
	}
	.input_as{
		display: inline-block;
		width:100%;
		color:#000;
	}
	.label2_right_sm{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#666;
	}
	.uni-input-input{
		font-size: 30rpx!important;
	}
	.bao_btn{
		    background: #ff80c0;
		    color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width:90%;
			height:80rpx;
			margin:50rpx auto 0;
			font-size:30rpx;
	}
	.play_ul{
		width:94%;
		padding:20rpx 3%;
		margin: 20rpx auto 0;
		background-color: #fff;
	}
	.play_li{
		position: relative;
		width:100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.play_li_left{
		width:15%;
		display: flex;
		align-items: center;
	}
	.play_li_left image{
		width:60rpx;
	}
	.play_li_right{
		width:85%;
		font-size:28rpx;
	}
	.play_li_right_top{
		font-size:30rpx;
	}
	.play_li_right_bt{
		color:#666;
		margin-top:5rpx;
	}
	.play_li_right_radio{
		
	}
</style>
